<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人空间</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .rr{
            display: flex;
            justify-content: center;
        }
        .rr2{
            width: 270px;
            height: 420px;
            top: 150px;
            transform-style: preserve-3d;
            perspective: 1000px;
            transition: .8s;
        }
        .fy1,.fy2,.fy3,.fy4,.fy5{
            width: 270px;
            height: 400px;
            position: absolute;
            transform-origin: left;
            background-size: cover;
            transition: calc(var(--i)*.3s);
            z-index: calc(var(--i)*99);
        }
        .fy1,.fy2{
            border: solid 20px #576574;
            border-left: none;
            top: -20px;
            border-radius: 0 20px 20px 0;
        }
        .rr2:hover .fy1{
              border-left: #576574 20px solid;
        }
        .rr2:hover .fy2,.rr2:hover .fy3,.rr2:hover .fy4,.rr2:hover.fy5{
            transform: rotateY(-180deg);
            transition: calc(var(--s)*.4s);
            z-index: calc(var(--s)*-99);
        }
        .rr2:hover{
            transform: translateX(100px);
        }
    </style>
</head>
<body>

    <div class="header">
        <a href="index.html">首页</a>
        <a href="about.html">关于我</a>
        <a class="active" href="">我的动漫世界</a>
        <a href="yxkj.html">我的游戏空间</a>
        <a href="lxwm.html">联系我</a>
    </div>

    <div class="page-title">
        <h3>我的动漫世界</h3>
    </div>

    <div class="rr">
        <div class="rr2">
            <div class="fy1" style="--i:2; background-image: url(dm1.jpg);"></div>
            <div class="fy2" style="--i:4;--s:1; background-image: url(dm2.jpg);"></div>
            <div class="fy3" style="--i:3;--s:2; background-image: url(dm3.jpg);"></div>
            <div class="fy4" style="--i:2;--s:3; background-image: url(dm4.jpg);"></div>
            <div class="fy5" style="--i:1;--s:4; background-image: url(dm5.jpg);"></div>
        </div>
    </div>


    <div class="page-title">
        <h3>精彩图集</h3>
    </div>
    <div class="img-box">
        <img src="./R-C (3).jpg" alt="">
        <img src="./dmp3.jpg" alt="">
        <img src="./dmtp2.jpg" alt="">
        <img src="./dmtp4.jpg" alt="">
        <img src="./dmtp5.jpeg" alt="">
        <img src="./dmtp6.jpg" alt="">
        <img src="./dmtp7.png" alt="">
        <img src="./dmtp8.jpg" alt="">
        <img src="./body.png" alt="">
        <img src="./body2.jpg" alt="">
        <img src="./body3.webp" alt="">
        <img src="./body4.jpg" alt="">
        <img src="./body2.jpg" alt="">
        <img src="./body3.webp" alt="">
        <img src="./body4.jpg" alt="">
        <img src="./body4.jpg" alt="">
    </div>

    <div class="footer2">
        <p class="ee">我的个人网站</p>
    </div>
    
</body>
</html>